<template>
  <div>
    <el-row>
      <el-col :span="5">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree @node-click="handlerClick" class="filter-tree" :data="EngData" :props="defaultProps"
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="15">
        <div v-if="params.device_id" class="table">
          <el-form :inline="true" :model="form">
            <el-form-item>
              <!-- value-format="yyyy-MM" 2021-05格式 -->
              <el-date-picker value-format="timestamp" v-model="form.time" type="datetimerange"
                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="toSearch">搜索</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格  -->
          <el-table :data="monitorData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="insert_time" label="日期" width="180" align="center">
              <template v-slot="scope">
                <div>
                  {{ scope.row.insert_time | fmtDate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="tsp" label="tsp" width="180">
            </el-table-column>
            <el-table-column prop="pm10" label="pm10">
            </el-table-column>
            <el-table-column prop="pm25" label="pm2.5">
            </el-table-column>
            <el-table-column prop="temperature" label="温度">
            </el-table-column>
            <el-table-column prop="humidity" label="湿度">
            </el-table-column>
            <el-table-column prop="wind_direction" label="风向">
            </el-table-column>
            <el-table-column prop="wind_speed" label="风速">
            </el-table-column>
          </el-table>
        </div>
        <div v-else style="line-height: 50px;color: red;font-size: 20px;text-align: center;">请点击设备查看数据</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 表格数据源 
      monitorData: [],
      // 表单数据对象 
      form: { time: [] },
      // 树形结构展示数据 
      EngData: [],
      // 快捷选项配置项 
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      params: {
        page: 1,
        pageSize: 10,
        device_id: 0,
        engineer_id: 0
      }
    }
  },
  watch: {
    // 监听用户输入框输入的值并进行过滤 
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    // 点击节点触发 
    handlerClick(val, node) {
      // console.log(val);
      // 判断点击的是设备  将设备id 工程id page pageSize传给后端 
      if (!val.children) {
        this.params.device_id = val.id;
        this.params.engineer_id = val.engineer_id;
        this.getMonitor();
      }
    },
    // 搜索 
    toSearch() {
      this.params.page = 1;
      this.getMonitor();
    },
    // 封装方法获取监测历史数据
    async getMonitor() {
      let temp = {
        ...this.params
      };
      // 如果传了时间  
      if (this.form.time) {
        temp.begin_time = this.form.time[0],
          temp.end_time = this.form.time[1]
      }
      let res = await get('/monitor/pageQuery', temp);
      console.log(res, '-------');
      this.monitorData = res.data.list;
    },
    // getData(){
    //     // axios 基于promise的http客户端 
    //     get().then((res)=>{
    //         // 处理业务逻辑 
    //         this.xxx = res.data;
    //     })
    // },
    // 封装方法获取工程设备树 
    async getEngDevData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      console.log(res, '88888');
      this.EngData = res.data;
    },
    filterNode(value, data) {
      // data是树形结构数据 
      if (!value) return true;
      // value输入框输入的值 
      // 返回就是包含输入框关键字的label(节点)  
      return data.name.indexOf(value) !== -1;
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex)
      if (rowIndex % 2 == 0 || rowIndex == 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
      return '';
    }
  },
  created() {
    this.getEngDevData();
    this.getMonitor();
  }
}
</script>
<style lang="scss" scoped>
.tree {
  height: calc(100vh - 80px);
  padding-right: 10px;
  border-right: 1px solid #ececec;
  margin-right: 10px;
}
</style>